<template>
  <div>
    <div v-if="noData" class="noDataCon">
      <div class="noDataCon-identi">
        <img src="../../../static/img/noData.png">
        <span>暂无数据</span>
      </div>
    </div>
    <div v-else :id="cid" class="barCharts" :style="chartStyle"></div>
  </div>
</template>
<script>
/**
 * option.circulation // 是否支持图标的循环轮播
 * openDataZoom// 是否打开dataZoom
  noSmooth // 折线图 不光滑
 */
import echarts from "echarts";
import _ from "lodash";
import "zrender/lib/svg/svg";
export default {
  props: {
    option: {
      type: Object,
      default: () => {
        return {};
      }
    },
    chartStyle: {
      type: String
    },
    noData: {
      type: Boolean,
      default: () => {
        return false;
      }
    }
  },
  watch: {
    option(res) {
      this.myChart.hideLoading();
      this.initChart(res);
    },
    noData(res) {
      if (res) {
        this.myChart.clear();
      } else {
        this.initChart(this.option);
      }
    }
  },
  mounted() {
    var self = this;
    self.myChart = echarts.init(document.getElementById(self.cid), null, {
      devicePixelRatio: 2
    });
    self.myChart.showLoading({
      text: "  努力加载中...",
      color: "#48E5FF",
      textColor: "#48E5FF",
      maskColor: "rgba(255, 255, 255, 0)"
    });
  },
  beforeDestroy() {
    clearInterval(this.setTime);
    clearTimeout(this.timeOut);
  },
  data() {
    return {
      setTime: null,
      timeOut: null,
      cid: String(10 * Math.random()),
      baseOption: {
        dataZoom: [
          {
            show: false,
            bottom: 87,
            height: 6,
            xAxisIndex: [0],
            start: 0,
            right: 0,
            zoomLock: true,
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "120%",
            backgroundColor: "#31cee6",
            fillerColor: "#3F79F6",
            handleStyle: {
              color: "#3F79F6",
              opacity: 0
            },
            textStyle: {
              color: "#3F79F6"
            }
          }
        ],
        color: [
          "#f717fe",
          "#0c43fd",
          "#2ff0d2",
          "#8d4cfd",
          "#31cee6",
          "#6937fd",
          "#3771ff",
          "#da34fb",
          "#2ff0d2"
        ],
        legend: {
          itemGap: 10,
          itemWidth: 10,
          itemHeight: 10
        },
        series: [],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            shadowStyle: {
              // 鼠标hover，阴影效果
              width: 80,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                globalCoord: false // 缺省为 false
              }
            }
          },
          extraCssText: "text-align:center;background-color:transparent"
        },
        xAxis: {
          data: [],
          axisLabel: {
            margin: 19,
            rich: {
              // x轴富文本样式
              value: {
                lineHeight: 0,
                align: "center",
                color: "#00d1ff",
                fontWeight: "bold",
                fontSize: 12,
                marginTop: 5
              }
            },
            interval: 0 // x轴精度为
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#262544"
            }
          }
        },
        yAxis: {
          axisLabel: {
            margin: 16,
            color: "#31cee6",
            fontSize: 12,
            fontWeight: "bold",
            show: true
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(49,206,230,0.2)",
              type: "dashed",
              width: "2"
            }
          }
        }
      },
      basePieOption: {
        color: [
          "#f717fe",
          "#0c43fd",
          "#2ff0d2",
          "#8d4cfd",
          "#31cee6",
          "#6937fd",
          "#3771ff",
          "#da34fb",
          "#2ff0d2"
        ],
        legend: {
          itemGap: 10,
          itemWidth: 10,
          itemHeight: 10
        },
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: "shadow",
            shadowStyle: {
              // 鼠标hover，阴影效果
              width: 80,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                globalCoord: false // 缺省为 false
              }
            }
          },
          extraCssText: "text-align:center;background-color:transparent"
        },
        title: {
          left: "center",
          top: "34%",
          padding: [24, 0],
          subtextStyle: {
            color: "#2ff0d2",
            fontWeight: "bold",
            fontFamily: "DIN Condensed Bold",
            fontSize: 30
          },
          textStyle: {
            color: "#2ff0d2",
            fontSize: 18
          }
        },
        series: [
          {
            data: [],
            radius: ["50%", "60%"],
            center: ["50%", "50%"],
            label: {
              show: true,
              formatter: "{b} \n {d}%",
              position: "outside",
              fontFamily: "DIN Condensed Bold"
            }
          }
        ]
      }
    };
  },
  methods: {
    init() {
      var self = this;
      this.timeOut = setTimeout(() => {
        self.myChart.resize();
      }, 0);
      window.onresize = function temp() {
        self.myChart.resize();
      };
    },
    setExchangeChart(option) {
      var self = this;
      this.baseOption.series = [];
      this.baseOption.xAxis.data = [];
      if (this.baseOption.yAxis.data) {
        this.baseOption.yAxis.data = [];
      }
      var allOption = _.merge(this.baseOption, option);
      if (this.myChart) {
        this.myChart.clear();
        this.myChart.dispose();
      }
      this.timeOut = setTimeout(function() {
        self.myChart = echarts.init(document.getElementById(self.cid), null, {
          devicePixelRatio: 2
        });
        self.myChart.setOption(allOption);
        self.init();
      }, 0);
    },
    initChart(option) {
      var self = this;
      let max = 0;
      if (option.exchange) {
        this.setExchangeChart(option);
      } else {
        if (option.series[0].length === 0) {
          return;
        }
        if (option.series[0].type === "pie") {
          this.basePieOption.series[0].data = [];
          option = _.merge(this.basePieOption, option);
        } else {
          option.series.forEach(item => {
            item.data.forEach(dataItem => {
              if (dataItem && dataItem.value) {
                if (max < dataItem.value) {
                  max = dataItem.value;
                }
              } else {
                if (max < dataItem) {
                  max = dataItem;
                }
              }
            });
          });
          if (!option.openDataZoom) {
            if (
              option.xAxis &&
              option.xAxis.data &&
              option.xAxis.data.length > 13
            ) {
              this.baseOption.dataZoom[0].show = true;
              this.baseOption.dataZoom[0].end =
                9 / option.xAxis.data.length * 100;
            } else {
              this.baseOption.dataZoom[0].show = false;
              this.baseOption.dataZoom[0].end = 100;
            }
          } else {
            this.baseOption.dataZoom[0].show = false;
            this.baseOption.dataZoom[0].end = 100;
          }

          this.baseOption.yAxis.splitNumber = 2;
        }
        if (option.series[0].type === "line") {
          option.series.forEach(item => {
            item.smooth = 0;
            item.z = 10;
          });
        } else if (option.series[0].type === "bar") {
          option.series.forEach(item => {
            if (!this.option.noSmooth) {
              item.smooth = 0;
              item.smoothMonotone = "none";
            }
            var label = {
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  fontWeight: "bold",
                  fontFamily: "DIN Condensed Bold"
                }
              }
            };
            // 传入的label属性会覆盖原来的属性
            item.label = _.merge(label, item.label || {});
            // if (item.itemStyle && item.itemStyle.normal) {
            //   item.itemStyle.normal.barBorderRadius = [30, 30, 0, 0];
            // }
            item.z = 10;
          });
        }
        this.baseOption.series = [];
        this.baseOption.xAxis.data = [];
        if (this.baseOption.yAxis.data) {
          this.baseOption.yAxis.data = [];
        }
        var allOption = {};
        if (option.series[0].type === "pie") {
          allOption = option;
        } else {
          allOption = _.merge(this.baseOption, option);
        }
        if (this.myChart) {
          this.myChart.clear();
          this.myChart.dispose();
        }
        if (allOption.circulation) {
          var currentIndex = -2;
          self.myChart = echarts.init(document.getElementById(self.cid), null, {
            devicePixelRatio: 2
          });
          this.setTime = setInterval(function() {
            var dataLen = allOption.series[0].data.length;
            // 取消之前高亮的图形
            if (allOption.autoLabel) {
              if (currentIndex > 0) {
                allOption.series[0].data[
                  currentIndex
                ].label.normal.show = false;
              } else {
                allOption.series[0].data[0].label.normal.show = false;
              }
            }
            self.myChart.dispatchAction({
              type: "pieUnSelect",
              seriesIndex: 0,
              dataIndex: currentIndex
            });
            currentIndex = (currentIndex + 2) % dataLen;
            // 高亮当前图形
            self.myChart.dispatchAction({
              type: "pieSelect",
              seriesIndex: 0,
              dataIndex: currentIndex
            });
            self.$emit("pieChangeCount", currentIndex);
            if (allOption.autoLabel) {
              allOption.series[0].data[currentIndex].label.normal.show = true;
            }
            self.myChart.setOption(allOption);
            self.init();
          }, 2000);
        } else {
          this.timeOut = setTimeout(function() {
            self.myChart = echarts.init(
              document.getElementById(self.cid),
              null,
              {
                devicePixelRatio: 2
              }
            );
            self.myChart.setOption(allOption);
            // 鼠标监听事件
            // self.myChart.on("mouseover", function(params) {
            //   // 触发事件
            //   self.myChart.dispatchAction({
            //     type: "showTip",
            //     // 系列的 index，在 tooltip 的 trigger 为 axis 的时候可选。
            //     seriesIndex: 0,
            //     // 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据
            //     dataIndex: 0,
            //     // 可选，数据名称，在有 dataIndex 的时候忽略
            //     name: 0
            //   })
            // })
            self.init();
          }, 0);
        }
      }
    }
  }
};
</script>
<style scoped>
.noDataCon {
  position: relative;
  width: 100%;
  height: inherit;
  color: white;
  font-size: 0.2rem;
}

.noDataCon span {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
}

.noDataCon-identi {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: inherit;
  min-height: 100%;
}
.noDataCon-identi img {
  width: 0.67rem;
  height: 0.61rem;
  margin-bottom: 0.12rem;
}
.noDataCon-identi span {
  color: #48e5ff;
  font-size: 0.16rem;
}
.barCharts {
  /* min-height:10rem; */
  /* min-width:10rem */
}
</style>